<div class="px-3 pt-3 pb-2">
  <farris-radiogroup [horizontal]="true" [textField]="'text'" [valueField]="'value'" [data]="bindingTypeEnumData"
    [(ngModel)]="bindingType" (changeValue)="changeBindingType()">
  </farris-radiogroup>
</div>

<!-- 填写字符串-->
<div *ngIf="bindingType==='Custom' && editorParams.customType==='string'"
  class="farris-form-controls-inline  p-3 border-top">
  <div class="farris-group-wrap">
    <div class="form-group farris-form-group">
      <label class="col-form-label">
        <span class="farris-label-text">自定义</span>
      </label>
      <div class="farris-input-wrap">
        <input type="input" class="form-control" [(ngModel)]="customBinding">
      </div>
    </div>
  </div>

</div>

<!-- 下拉选择-->
<div *ngIf="bindingType==='Custom' && (editorParams.customType==='select' || editorParams.customType==='boolean')"
  class="farris-form-controls-inline p-3 border-top">
  <div class="farris-group-wrap">
    <div class="form-group farris-form-group">
      <label class="col-form-label">
        <span class="farris-label-text">请选择</span>
      </label>
      <div class="farris-input-wrap">
        <farris-combo-list [(ngModel)]="customBinding" [idField]="selectConfig.idField"
          [textField]="selectConfig.textField" [data]="selectConfig.options" [editable]="false"
          [enableClear]="selectConfig.enableClear" [enableCancelSelected]="false">
        </farris-combo-list>
      </div>
    </div>
  </div>

</div>
<!-- 布尔And 字符串-->
<div *ngIf="bindingType==='Custom' && editorParams.customType==='booleanOrString'"
  class="farris-form-controls-inline p-3 border-top">
  <div class="farris-group-wrap">
    <div class="form-group farris-form-group">
      <label class="col-form-label">
        <span class="farris-label-text">请选择</span>
      </label>
      <div class="farris-input-wrap">
        <farris-radiogroup [(ngModel)]="customBoolAndStringRadioValue" [horizontal]="true"
          [textField]="selectConfig.textField" [valueField]="selectConfig.idField" [data]="selectConfig.options">
        </farris-radiogroup>
      </div>
    </div>
  </div>
  <div class="farris-group-wrap" *ngIf="customBoolAndStringRadioValue==='string'">
    <div class="form-group farris-form-group">
      <label class="col-form-label">
        <span class="farris-label-text"></span>
      </label>
      <div class="farris-input-wrap">
        <input type="input" class="form-control" [(ngModel)]="customStringValue">
      </div>
    </div>
  </div>
</div>

<!-- 下拉框And 字符串-->
<div *ngIf="bindingType==='Custom' && editorParams.customType==='selectOrString'"
  class="farris-form-controls-inline p-3 border-top">
  <div class="farris-group-wrap">
    <div class="form-group farris-form-group">
      <label class="col-form-label">
        <span class="farris-label-text">请选择</span>
      </label>
      <div class="farris-input-wrap">
        <farris-combo-list [(ngModel)]="customBoolAndStringRadioValue" [idField]="selectConfig.idField"
          [textField]="selectConfig.textField" [data]="selectConfig.options" [editable]="false"
          [enableClear]="selectConfig.enableClear" [enableCancelSelected]="false">
        </farris-combo-list>
      </div>
    </div>
  </div>
  <div class="farris-group-wrap" *ngIf="customBoolAndStringRadioValue==='string'">
    <div class="form-group farris-form-group">
      <label class="col-form-label">
        <span class="farris-label-text"></span>
      </label>
      <div class="farris-input-wrap">
        <input type="input" class="form-control" [(ngModel)]="customStringValue">
      </div>
    </div>
  </div>
</div>

<!-- 日期 -->
<div *ngIf="bindingType==='Custom' && (editorParams.customType==='date'|| editorParams.customType==='datetime')"
  class="farris-form-controls-inline m-3">
  <div class="farris-group-wrap">
    <div class="form-group farris-form-group">
      <label class="col-form-label">
        <span class="farris-label-text"></span>
      </label>
      <div class="farris-input-wrap">
        <farris-datepicker [(ngModel)]="customBinding" [editable]="false" [showTime]="showDateTime"
          [dateFormat]="dateFormat" [returnFormat]="dateFormat" [returnType]="'string'" [maxDate]="editorParams.maxDate"
          [minDate]="editorParams.minDate">
        </farris-datepicker>
      </div>
    </div>
  </div>
</div>




<!-- 字段或变量的绑定树表-->
<div class="h-100 px-3 pb-2" [style.display]="bindingType!=='Custom' && bindingType!=='Expression'?'block':'none'">
  <farris-treetable #treeTable [data]="treeData" [columns]="treeCols" [idField]="'id'" [fixedHeader]="true"
    [width]="'100%'" [height]="'100%'" [singleSelect]="true" [showFilterBar]="false" [resizableColumns]="true"
    [showBorder]="false" [fit]="true" [striped]="true">
    <ng-template farrisTemplate="body" let-rowIndex let-rowNode let-rowData="rowData" let-columns="columns">
      <tr [selectRow]="rowNode" [rowIndex]="" [dblclick]="true" [selectRowDisabled]="!canChecked(rowNode.node)"
        [class.farris-table-selectedrow]="rowNode.isSelected">
        <td *ngFor="let col of columns; let i = index" style="padding: 0.25rem 0.75rem">
          <farris-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></farris-treeTableToggler>
          {{rowData[col.field]}}
        </td>
      </tr>
    </ng-template>

  </farris-treetable>
</div>

<div class="h-100" *ngIf="bindingType==='Expression'">
  <!-- <app-expression-editor [value]="expressionValue" [editorParams]="expressionParams"></app-expression-editor> -->
</div>

<ng-template #bindingFooter>
  <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>